<template>
	
	
	
	
	
	<view class="chargeDtailPage">
    <view class="head">
    	<image style="height:100%;width:100%"src="../../static/images/fq/jy.png" mode=""></image>
    </view>
	<view style="background-color: white;height:330rpx">
	<view style="width:750rpx;height:60rpx;">
		<view class="chargeDtailPage-topprices">
			<text class="redprice">￥310.00</text>
			<text style="color:#999999;margin-left:20rpx">vip:280</text>
		</view>
	</view>
	

	<view style="width:720rpx;height:120rpx;">
		<view class="chargeDtailPage-topprices">
			<view class="te">美孚(mobil)金装美孚一号机油 全合成机油 汽车发动机油润滑油 金美孚1号 SN级 OW-40 1L*4</view>
			
		</view>
	</view>
	
	<view class="bz">
		<view class="bz1">
			正品保障
		</view>
		<view  class="bz1">
			会员优惠
		</view>
		<view  class="bz1">
			产品价保
		</view>
	</view>
	<view style="display: flex;">
		<view style="margin-left:40rpx;color:#C0C0C0;font-size: 25rpx;">
			商品已挂平台担保，正品保障，支持防卫查询
		</view>
		<view class="z">
			正
		</view>
	</view>
	</view>
		<!-- 上面充电站标题部分 -->
		<view class="chargeDtailPage-top" style="height:870rpx">
			<view style="display: flex;width:650rpx;border-bottom:2rpx solid #C0C0C0;height:50rpx">
				<view class="yx">
					已选
				</view>
				<view class="yx1">
					金美孚1号SN级OW-40 1L*4 x1
				</view>
			</view>
		<view style="display: flex;width:710rpx;height:40rpx">
			<view class="yx"style="margin-top: 15rpx;">
				地址
			</view>
			<view class="yx1" style="margin-top: 20rpx;">
				四川省成都市武侯区草金南路一段大道口
			</view>
			<view class="yx1" style="margin-top: 15rpx;font-size: 30rpx;color:red;font-weight: 800;">
				配送到店
			</view>
		</view>
		<view class="userComments">
			<view style="display: flex;margin-top:25rpx">
				
			
		<view style="width:10rpx;height:10rpx;border-radius: 10rpx;margin-top:15rpx;background-color:orange;margin-left:-15rpx;">
			
		</view>
			<view class="userComments-yypl" style="margin-left:10rpx;display: flex;">
				<text>评论</text>
				<text style="font-size: 22rpx;margin-left:10rpx;color: #999999;margin-top: 5rpx;">2.7w+</text>
				<text style="margin-left: 340rpx;font-size: 25rpx;color:red;margin-top: 5rpx;">3392</text><text style="font-size: 25rpx;margin-top: 5rpx;">条好评</text>
				<view style="width:30rpx;height: 30rpx;margin-top:6rpx">
					<image style="width:100%;height:100%"src="../../static/images/fq/xy.png" mode=""></image>
				</view>
			</view>
		</view>
			<!-- 每一项评论 -->
			<view class="userComments-contents">
				<!-- 评论头像 -->
				<view class="userComments-leftimg">
					<image class="userComments-leftimgicon" src="../../static/images/fq/dl.png" mode="">
					</image>
				</view>
		
				<!-- 评论详情 -->
				<view class="userComments-middledetail">
					<view class="userComments-telephone">
						185<text>****</text>8845
					</view>
		
					<view class="userComments-picture">
						<image class="userComments-pictureitem" v-for="item in 5" :key="item"
							src="../../static/images/fq/xx.png" mode=""></image>
					</view>
					<view class="userComments-detail">
						<text>费用很便宜，离家近还方便~~~</text>
					</view>
		
					<view class="userComments-data">
						<text>2021-02-15</text>
					</view>
		
				</view>
		
				<!-- 右边点赞 -->
				
		
			</view>
		
			<!-- 每一项评论 -->
			<view class="userComments-contents">
				<!-- 评论头像 -->
				<view class="userComments-leftimg">
					<image class="userComments-leftimgicon" src="../../static/images/fq/dl1.png" mode="">
					</image>
				</view>
		
				<!-- 评论详情 -->
				<view class="userComments-middledetail">
					<view class="userComments-telephone">
						185<text>****</text>8845
					</view>
		
					<view class="userComments-picture">
						<image class="userComments-pictureitem" v-for="item in 5" :key="item"
							src="../../static/images/fq/xx.png" mode=""></image>
					</view>
					<view class="userComments-detail">
						<text>费用很便宜，离家近还方便~~~</text>
					</view>
		
					<view class="userComments-data">
						<text>2021-02-15</text>
					</view>
		
				</view>
		
				<!-- 右边点赞 -->
			
		
			</view>
		</view>
		<view style="width:10rpx;height:10rpx;border-radius: 10rpx;margin-top:25rpx;background-color:orange;margin-left:-15rpx;">
			
		</view>
		<view class="userComments-yypl" style="margin-left:10rpx;display: flex;margin-top:-22rpx">
			<text>买家秀</text>
			<text style="font-size: 22rpx;margin-left:10rpx;color: #999999;margin-top: 10rpx;">358+</text>
			<text style="font-size: 25rpx;margin-top: 15rpx;margin-left:355rpx">查看全部</text>
			<view style="width:30rpx;height: 30rpx;margin-top:14rpx">
				<image style="width:100%;height:100%"src="../../static/images/fq/xy.png" mode=""></image>
			</view>
		</view>
		<view class="aac">
			<view class="aac1">
				<image style="width:100%;height:100%"src="../../static/images/fq/mj1.png" mode="aspectFill"></image>
			</view>
			<view class="aac1">
				<image style="width:100%;height:100%" src="../../static/images/fq/mj2.png" mode="aspectFill"></image>
			</view>
			<view class="aac1">
				<image  style="width:100%;height:100%" src="../../static/images/fq/mj3.png" mode="aspectFill"></image>
			</view>
			<view class="aac1">
				<image style="width:100%;height:100%" src="../../static/images/fq/mj4.png" mode="aspectFill"></image>
			</view>
		</view>
		</view>


		<!-- 电站信息 -->
		<view class="chargeInfor">
			<!-- 标题 -->
			
			<!-- 电站信息 -->
			<view class="chargeInfor-detailInfor">
				<view style="display: flex;">
					<view class="chargeInfor-titletop" style="width:150rpx;">
						<text class="chargeInfor-yyxq">车友提问</text>
						
					
						
						</view>
						<view class="">
							<text style="margin-left:350rpx;font-size: 28rpx;">查看全部</text>
							
						</view>
							<view style="width:30rpx;height: 30rpx;">
									<image style="width:100%;height:100%;margin-top:10rpx"src="../../static/images/fq/xy.png" mode=""></image>
							</view>
				</view>
				
				<view style="width:650rpx;height:60rpx;display: flex;">
					<view style="width:60rpx;height:60rpx;">
						<image style="width:100%;height:100%"src="../../static/images/fq/w.png" mode=""></image>
					</view>
					<view style="width:450rpx;height:60rpx;line-height: 60rpx;font-size: 27rpx;">
						车友们，这个比壳牌哪个好用些
					</view>
					<view style="width:160rpx;height:60rpx;line-height: 60rpx;text-align: center;font-size: 23rpx;color: #999999;">
					  2个回复
					</view>
				</view>
				<view style="width:650rpx;height:60rpx;display: flex;">
					<view style="width:60rpx;height:60rpx;">
						<image style="width:100%;height:100%"src="../../static/images/fq/w.png" mode=""></image>
					</view>
					<view style="width:450rpx;height:60rpx;line-height: 60rpx;font-size: 27rpx;">
						吉利金刚可用用吗，比这个好用吗？
					</view>
					<view style="width:160rpx;height:60rpx;line-height: 60rpx;text-align: center;font-size: 23rpx;color: #999999;">
					  2个回复
					</view>
				</view>
			
			</view>

		</view>


	<view style="width:750rpx;height:100rpx;background-color: white;position: fixed;bottom:0;display: flex;">
		<view style="width:100rpx;height:100rpx;margin-left:20rpx">
			<image style="width:60%;height:60%;margin-left:20rpx"src="../../static/icons/common/icon_tab_market@3x.png" mode=""></image>
			<view style="font-size: 23rpx;text-align: center;">
				店铺
			</view>
		</view>
		<view style="width:100rpx;height:100rpx;margin-left:20rpx">
			<image style="width:60%;height:60%;margin-left:20rpx"src="../../static/icons/common/icon_tab_mine@3x.png" mode=""></image>
			<view style="font-size: 23rpx;text-align: center;">
				客服
			</view>
		</view>
		<view style="width:500rpx ;height:100rpx;display: flex;">
			<view style="width:200rpx;height:70rpx;margin-left:50rpx;border-radius: 35rpx;line-height: 70rpx;text-align: center;background-color:orange ;color:white;margin-top:10rpx">
				加入购物车
			</view>
			<view style="width:200rpx;height:70rpx;margin-left:20rpx;border-radius: 35rpx;line-height: 70rpx;text-align: center;background-color:red;color:white;margin-top:10rpx ">
				立即购买
			</view>
		</view>
	</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {

			}
		},
		methods: {

		}
	}
</script>

<style scoped lang="scss">
	.aac{
		margin-top:10rpx;
		display: flex;
		width:660rpx;
		height:200rpx;
		justify-content: space-between;
		
	}
	.aac1{
		padding:0;
		width:23%;
		height:100%;
		
	}
	.yx{
		font-size: 30rpx;
		font-weight: 900;
	}
	.yx1{
		margin-left:20rpx;
		font-size:25rpx;
		margin-top:5rpx
	}
	 
	.z{
		width:30rpx;
		height:30rpx;
		border:1rpx solid red;
		border-radius: 30rpx;
		font-size: 20rpx;
		text-align: center;
		margin-left:10rpx;
		color:red
	}
	.bz1{
		width:150rpx;
		height: 40rpx;
		border-radius: 50rpx;
		border:1rpx solid red;
		margin-left:40rpx;
		text-align: center;
		color:red
	}
	.bz{
		width:750rpx;
		height:60rpx;
		margin-top: 12rpx;
		display: flex;
		padding-top:20rpx
	}
	.te{
		
		margin-left:45rpx;
		color:#333333;
		font-weight: 700;
	}
	.redprice {
		color: #eb1313;
		font-size: 42rpx;
		font-weight: 700;
		margin-left:30rpx
	}
	.head{
		width:750rpx;
		height:750rpx;
		border:1rpx solid red($color: #000000)
	}
	.chargeDtailPage {
		margin-bottom: 100rpx;
		

		// 充电站上面部分
		.chargeDtailPage-top {
			padding: 25rpx;
			width: 680rpx;
			margin: 20rpx auto;
			height: 230rpx;
			background-color: white;
			// display: flex;
			
			border-radius: 30rpx;

			// 充电站左边图片 
			.chargeDtailPage-top-image {
				width: 260rpx;
				height: 210rpx;
			}

			// 充电站中间详情
			.chargeDtailPage-top-content {
				width: 320rpx;
				// padding: 0rpx 20rpx 10rpx 20rpx;

				.chargeDtailPage-title {
					font-size: 32rpx;
					margin-bottom: 10rpx;
					font-weight: 700;
				}

				.chargeDtailPage-topaddress {
					font-size: 22rpx;
					color: #919191;
					margin-bottom: 10rpx;
				}

				.chargeDtailPage-toptags {
					.tagsitems {
						font-size: 20rpx;
						background-color: #e8e8e8;
						border-radius: 10rpx;
						// padding: 6rpx;
						margin: 20rpx 10rpx 20rpx 0rpx;
					}

				}

				.chargeDtailPage-topprices {
					// color: gray;
					font-size: 24rpx;
					margin: 10rpx 0rpx;

					.redprice {
						
						font-size: 32rpx;
						font-weight: 700;
					}
				}

			}


			// 充电站右边导航
			.chargeDtailPage-toprigghtnav {
				width: 80rpx;
				text-align: center;

				.chargeDtailPage-rightimage {
					margin-top: 60rpx;
					width: 60rpx;
					height: 60rpx;
				}

				.chargeDtailPage-righttitle {
					font-size: 24rpx;
					color: gray;
				}

			}
		}

		//电站信息
		.chargeInfor {
			padding: 15rpx;
             width:720rpx;
			.chargeInfor-detail {
				border-left: 6rpx solid #f5610c;
				padding-left: 10rpx;
				margin-bottom: 20rpx;
				font-size: 32rpx;
				font-weight: 700;
			}

			.chargeInfor-detailInfor {
				background-color: white;
				border-radius: 30rpx;
				padding: 20rpx 0rpx 20rpx 30rpx;

				.chargeInfor-titletop {
					// border-bottom: 2rpx solid #e6e6e6;
					margin-bottom: 10rpx;
					padding-bottom: 10rpx;

					.chargeInfor-yyxq {
						border-left: 6rpx solid #f5610c;
						padding-left: 10rpx;
						font-size: 28rpx;
					}

					.kfitems {
						font-size: 28rpx;
						color: #949494;
						margin: 10rpx;
					}
				}

				.chargeInfor-titlearoud {
					.chargeInfor-zbss {
						border-left: 6rpx solid #f5610c;
						padding-left: 10rpx;
						font-size: 28rpx;
					}
				}

				.chargeInfor-list {
					display: flex;
					margin-top: 10rpx;

					.chargeInfor-listitem {
						width: 100rpx;
						text-align: center;
						padding: 10rpx 25rpx;

						.chargeInfor-listimg {
							width: 100rpx;
							height: 100rpx;
						}

						.chargeInfor-listtext {
							font-size: 24rpx;
							color: gray;
						}
					}

				}
			}
		}

		// 用户评论
		.userComments {
			margin-top: 20rpx;

			.userComments-yypl {
				// border: 1rpx solid #f5610c;
				// margin-left:10rpx;
				// padding-left: 10rpx;
				margin-bottom: 20rpx;
				font-size: 30rpx;
				font-weight: 700;
			}

			.userComments-contents {
				background-color: white;
				border-radius: 30rpx;
				padding: 20rpx;
				margin-top:15rpx;
				display: flex;
				margin-bottom: 2rpx;
                border:1px solid red;
				// 左边头像
				.userComments-leftimg {
					.userComments-leftimgicon {
						width: 100rpx;
						height: 100rpx;
					}

				}

				// 中间评论
				.userComments-middledetail {
					width: 460rpx;
					padding-left: 20rpx;

					.userComments-telephone {
						color: gray;
						font-size: 24rpx;
					}

					.userComments-picture {
						.userComments-pictureitem {
							width: 30rpx;
							height: 30rpx;
						}
					}

					.userComments-detail {
						font-size: 26rpx;
						margin-bottom: 20rpx;
					}

					.userComments-data {
						font-size: 24rpx;
						color: gray;
					}

				}

				.userComments-rightlikes {
					width: 96rpx;
					padding-top: 60rpx;

					.userComments-rightlikesicon {
						width: 60rpx;
						height: 60rpx;
						vertical-align: middle;
					}

					.userComments-rightlikestext {
						font-size: 24rpx;
					}
				}
			}
		}

		// 查看全部
		.lookall {
			text-align: center;
			font-size: 28rpx;
			color: #f5742a;
		}

		// 扫一扫
		.userScan {
			display: flex;
			padding: 20rpx;
			margin: 40rpx;
			border-radius: 100rpx;
			background-color: white;
			maigin-bottom: 100rpx;

			.userScan-click {
				width: 300rpx;
				display: flex;
				padding-left: 20rpx;

				.userScan-clickItem {
					width: 60rpx;
					padding: 0rpx 20rpx;
					text-align: center;

					.userScan-clickItemimg {
						width: 50rpx;
						height: 50rpx;
						margin: 0rpx;
						padding: 0rpx;
					}

					.userScan-clickItemtext {
						color: gray;
						font-size: 24rpx;
						margin-top: 0rpx;
					}
				}
			}

			// 扫一扫
			.userScan-scan {
				background-color: #f5610c;
				border-radius: 80rpx;
				color: white;
				text-align: center;
				width: 250rpx;
				height: 80rpx;
				line-height: 80rpx;
				margin-left: 40rpx;
				margin-top: 16rpx;
				font-size: 30rpx;
			}

		}
	}
</style>
